<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
    <link rel="stylesheet" href="../../css/framework7-icons.css">
  </head>
  <body>
    <div id="app">
      <div class="view view-main view-init">
        <div class="page">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="left"></div>
              <div class="title">Gauge</div>
              <div class="right"></div>
            </div>
          </div>
          <div class="page-content"><div class="block block-strong text-align-center">
<div class="gauge demo-gauge"></div>
<p class="segmented segmented-raised">
<a href="#" class="button" data-value="0">0%</a>
<a href="#" class="button" data-value="25">25%</a>
<a href="#" class="button" data-value="50">50%</a>
<a href="#" class="button" data-value="75">75%</a>
<a href="#" class="button" data-value="100">100%</a>
</p>
</div>
<div class="block-title">Circle Gauges</div>
<div class="block block-strong">
<div class="row">
<div class="col text-align-center">
<div class="gauge gauge-init" data-type="circle" data-value="0.44" data-value-text="44%" data-value-text-color="#ff9800" data-border-color="#ff9800"></div>
</div>
<div class="col text-align-center">
<div class="gauge gauge-init" data-type="circle" data-value="0.12" data-value-text="$120" data-value-text-color="#4caf50" data-border-color="#4caf50" data-label-text="of $1000 budget" data-label-text-color="#f44336" data-label-font-weight="700"></div>
</div>
</div>
</div>
<div class="block-title">Semicircle Gauges</div>
<div class="block block-strong">
<div class="row">
<div class="col text-align-center">
<div class="gauge gauge-init" data-type="semicircle" data-value="0.3" data-value-text="30%" data-value-text-color="#f44336"></div>
</div>
<div class="col text-align-center">
<div class="gauge gauge-init" data-type="semicircle" data-value="0.5" data-value-text="30kg" data-value-text-color="#e91e63" data-border-color="#e91e63" data-label-text="of 60kg total"></div>
</div>
</div>
</div>
<div class="block-title">Customization</div>
<div class="block block-strong">
<div class="row">
<div class="col text-align-center">
<div class="gauge gauge-init" data-type="circle" data-value="0.35" data-value-text="35%" data-value-text-color="#4caf50" data-value-font-size="51" data-value-font-weight="700" data-border-width="20" data-border-color="#4caf50" data-border-bg-color="#ffeb3b"></div>
</div>
<div class="col text-align-center">
<div class="gauge gauge-init" data-type="circle" data-value="0.67" data-value-text="$670" data-value-text-color="#000" data-border-color="#ff9800" data-label-text="of $1000 spent" data-label-text-color="#4caf50" data-label-font-weight="800" data-label-font-size="12" data-border-width="30"></div>
</div>
</div>
<br>
<div class="row">
<div class="col text-align-center">
<div class="gauge gauge-init" data-type="semicircle" data-value="0.5" data-value-text="50%" data-value-text-color="#ffeb3b" data-value-font-size="41" data-value-font-weight="700" data-border-width="10" data-border-color="#ffeb3b"></div>
</div>
<div class="col text-align-center">
<div class="gauge gauge-init" data-type="semicircle" data-value="0.77" data-border-color="#ff9800" data-label-text="$770 spent so far" data-label-text-color="#ff9800" data-label-font-weight="800" data-label-font-size="12"></div>
</div>
</div>
</div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="../../packages/core/js/framework7.min.js"></script>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      var plugin = {
        params: {
          theme: theme,
          root: '#app',
        }
      };
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
    </script>
    <script>
      var app = new Framework7();
      
      var $$ = Dom7;
      
      // Init top demo gauge
      var demoGauge = app.gauge.create({
        el: '.demo-gauge',
        type: 'circle',
        value: 0.5,
        size: 250,
        borderColor: '#2196f3',
        borderWidth: 10,
        valueText: '50%',
        valueFontSize: 41,
        valueTextColor: '#2196f3',
        labelText: 'amount of something',
      });
      
      // Change demo gauge on button click
      $$('.button').on('click', function () {
        var value = $$(this).attr('data-value');
        demoGauge.update({
          value: value / 100,
          valueText: value + '%'
        });
      });
    </script>
  </body>
</html>